<template>
    <div>
        <el-row class="normal">
            <el-col :span="4">
                <div>胃镜报告列表</div>
                <div
                    v-for="item in gastroscopeReportList"
                    :key="item.id"
                    :class="[
                        item.id === activeId ? activeClass : '',
                        normalClass,
                    ]"
                    @click="getInfo(item.id)"
                >
                    {{ item.reportPatientName }} {{ item.reportInspectionTime }}
                </div>
            </el-col>
            <el-col :span="20">
                <div class="a4">
                    <div style="position: relative">
                        <div style="position: absolute; top: -8px">
                            <el-button size="mini" @click="dataOutput"
                                >标注导出</el-button
                            >
                            <el-button size="mini" @click="operateMarkLabel"
                                >{{ isClosed ? '结束标注' : '开始标注' }}
                            </el-button>
                            <el-button size="mini" @click="operateShowLabel"
                                >{{ isShowTag ? '隐藏标签' : '显示标签' }}
                            </el-button>
                            <el-button size="mini" @click="reGet"
                                >重新获取
                            </el-button>
                        </div>
                    </div>
                    <el-row class="title">{{
                        infoData.reportHospitalName
                    }}</el-row>
                    <el-row class="title">{{
                        infoData.reportHospitalHeadTitle
                    }}</el-row>
                    <el-row>
                        <el-col :span="12" class="heiti"
                            >电话：{{ infoData.reportHospitalPhone }}
                        </el-col>
                        <el-col
                            :span="12"
                            style="text-align: right"
                            class="heiti"
                            >检查日期：{{ infoData.reportInspectionTime }}
                        </el-col>
                    </el-row>
                    <div class="cut-line"></div>
                    <el-row>
                        <el-col :span="6" class="heiti"
                            >检查号:{{ infoData.medicalRecordNumber }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >姓名:{{ infoData.reportPatientName }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >性别:{{ infoData.reportPatientSex }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >年龄:{{ infoData.reportPatientAge }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >住院号:{{ infoData.reportPatientClassNumber }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >床号:{{ infoData.reportPatientBedNumber }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >科室:{{ infoData.reportPatientDepartment }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >设备:{{ infoData.reportPatientEquipment }}
                        </el-col>
                        <el-col :span="6" class="heiti"
                            >检查名称:{{ infoData.reportPatientItemName }}
                        </el-col>
                    </el-row>
                    <div class="cut-line"></div>
                    <el-row class="image-box">
                        <el-col
                            :span="8"
                            v-for="item in srcList"
                            :key="item.index"
                            style="text-align: center; margin: 10px auto"
                        >
                            <el-image
                                style="width: 150px; height: 150px"
                                :src="item"
                                :preview-src-list="srcList"
                            >
                            </el-image>
                            <div class="disease-name"></div>
                        </el-col>
                    </el-row>
                    <div class="cut-line"></div>
                    <el-row>
                        <div class="heiti">检查所见：</div>
                        <!-- <div>{{ infoData.reportPatientInspectionSeen }}</div> -->
                        <div
                            style="white-space: pre-wrap"
                            v-html="infoData.reportPatientInspectionSeen"
                        ></div>
                    </el-row>

                    <el-row>
                        <div class="heiti">镜检诊断：</div>
                        <div>
                            <mark-label
                                :key="timer"
                                name="镜检诊断"
                                :isShowTag="isShowTag"
                                :labels="diagnosticBasisArray"
                                :data-content="jingjianzhenduan"
                                :delete-label-father-method="deleteLabel"
                                :add-label-father-method="addLabel"
                                :isClosed="isClosed"
                            />
                        </div>
                    </el-row>

                    <el-row>
                        <div class="heiti">建议：</div>
                        <div>{{ infoData.reportPatientAdvice }}</div>
                    </el-row>
                    <el-row>
                        <div class="check-doctor">
                            检查医生：{{
                                infoData.reportPatientInspectionDoctor
                            }}
                        </div>
                    </el-row>
                    <div class="cut-line"></div>
                    <el-row>
                        <el-col :span="12" style="color: red"
                            >{{ infoData.reportHospitalTailTitle }}
                        </el-col>
                        <el-col :span="12" style="text-align: right"
                            >报告日期：{{ infoData.reportTime }}
                        </el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import MarkLabel from '@templates/components/MarkLabel.vue';
import { DateUtil } from '@/client/libs/date';
export default {
    name: 'DiagnosisDetailGastroscopeReport',
    props: { gastroscopeReportList: Array },
    components: {
        MarkLabel,
    },
    data() {
        return {
            diagnosticBasisArray: [], // 诊断依据字典
            currentId: '', // 诊断依据字典
            imageServiceURL: process.env.ImageServiceURL,
            timer: '',
            isClosed: false,
            isShowTag: false,
            infoData: {},
            srcList: [],
            activeId: '',
            activeClass: 'is-active',
            normalClass: 'btn-item',
            jingjianzhenduan: {
                title: '镜检诊断',
                text: '',
                labels: [],
            },
        };
    },
    watch: {
        gastroscopeReportList: function (newArr, oldArr) {
            if (newArr.length > 0) {
                this.getInfo(newArr[0].id);
            } else {
                this.jingjianzhenduan.text = '';
                this.jingjianzhenduan.labels = [];
                this.srcList = [];
                this.activeId = '';
                this.infoData = {};
            }
        },
    },
    mounted() {
        this.getDiagnosticBasis();
    },
    methods: {
        deleteLabel(name, text, labels, label) {
            this.updateLabels({
                id: this.currentId,
                analysisResult: JSON.stringify(labels),
            });
        },
        addLabel(name, text, labels, label) {
            this.updateLabels({
                id: this.currentId,
                analysisResult: JSON.stringify(labels),
            });
        },
        updateLabels(data) {
            if (!!data.id) {
                this.$axios({
                    method: 'POST',
                    url: `/PROXY-Remote/gastroscopy_electronic_report/updateGastroscopyElectronicReport/by/id`,
                    data: data,
                }).then((res) => {
                    if (res.data.code !== 200) {
                        this.$message.error({ message: '标注接口请求错误' });
                    }
                });
            }
        },
        operateMarkLabel() {
            if (!this.isClosed) {
                this.isShowTag = true;
            }
            this.isClosed = !this.isClosed;
        },
        operateShowLabel() {
            if (this.isClosed) {
                this.isClosed = false;
            }
            this.isShowTag = !this.isShowTag;
        },
        reGet() {
            this.$confirm('此操作将重新获取数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    const pathologyId = sessionStorage.getItem('pathologyId');
                    this.$axios({
                        method: 'GET',
                        url: `/PROXY-Remote/gastroscopy_electronic_report/againCreateAsyncTask/forGastroscopyElectronicReportOfCancerHospital/by/${pathologyId}`,
                    })
                        .then((res) => {
                            if (res.data.code === 200) {
                                this.$message.info(
                                    '正在获取数据中，请稍后......'
                                );
                            }
                        })
                        .catch((error) => {
                            this.$message.error(error.message);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消',
                    });
                });
        },
        dataOutput() {
            let urlObject = window.URL || window.webkitURL || window;
            let export_blob = new Blob([
                JSON.stringify({
                    texts: {
                        [this.jingjianzhenduan.title]:
                            this.jingjianzhenduan.text,
                    },
                    labels: {
                        [this.jingjianzhenduan.title]:
                            this.jingjianzhenduan.labels,
                    },
                }),
            ]);
            let save_link = document.createElementNS(
                'http://www.w3.org/1999/xhtml',
                'a'
            );
            save_link.href = urlObject.createObjectURL(export_blob);
            save_link.download =
                '胃镜报告标注数据' +
                DateUtil.now('yyyy-MM-dd hh:mm:ss') +
                '.json';
            let ev = document.createEvent('MouseEvents');
            ev.initMouseEvent(
                'click',
                true,
                false,
                window,
                0,
                0,
                0,
                0,
                0,
                false,
                false,
                false,
                false,
                0,
                null
            );
            save_link.dispatchEvent(ev);
        },
        getInfo(pId) {
            this.currentId = pId;
            this.jingjianzhenduan.text = '';
            this.jingjianzhenduan.labels = [];
            this.srcList = [];
            this.activeId = '';
            this.infoData = {};
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/gastroscopy_electronic_report/get/by/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    this.timer = new Date().getTime();
                    let result = res.data.data;
                    this.infoData = result;
                    this.activeId = pId;
                    this.srcList = [];
                    //以句号分割并换行
                    if (
                        this.infoData.reportPatientItemName == '普通电子胃镜' ||
                        this.infoData.reportPatientItemName == '无痛电子胃镜'
                    ) {
                        this.infoData.reportPatientInspectionSeen =
                            this.infoData.reportPatientInspectionSeen.replace(
                                /\。/g,
                                '。</br>'
                            );
                    }

                    if (
                        this.infoData.reportPatientInspectionImagesStr === null
                    ) {
                        this.infoData.reportPatientInspectionImagesStr = [];
                    } else {
                        this.infoData.reportPatientInspectionImagesStr.forEach(
                            (element) => {
                                this.srcList.push(
                                    this.imageServiceURL + element
                                );
                            }
                        );
                    }
                    this.jingjianzhenduan.text =
                        this.infoData.reportPatientPathologicalDiagnosis;
                    let analysisResultArrar = JSON.parse(result.analysisResult);
                    if (analysisResultArrar) {
                        Object.keys(analysisResultArrar).map((key) => {
                            if (key === '内镜数据_检查结论') {
                                analysisResultArrar[key].entity_set.forEach(
                                    (item) => {
                                        this.jingjianzhenduan.labels.push({
                                            id: item.id,
                                            entity: item.entity,
                                            label: item.label,
                                            start: item.start,
                                            end: item.end,
                                            color:
                                                item.label.search('阴性') !== -1
                                                    ? 'success'
                                                    : item.label.search(
                                                          '阳性'
                                                      ) !== -1
                                                    ? 'danger'
                                                    : '',
                                        });
                                    }
                                );
                            }
                        });

                        this.jingjianzhenduan.labels.sort((a, b) => {
                            return a.start - b.start;
                        });
                    }
                } else if (res.data.code === 404) {
                    this.jingjianzhenduan.text = '';
                    this.jingjianzhenduan.labels = [];
                    this.srcList = [];
                    this.activeId = '';
                    this.infoData = {};
                    this.$message.info(res.data.message);
                }
            });
        },
        getDiagnosticBasis() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/dicts/list',
                params: {
                    code: 'diagnosticBasis',
                    page: 0,
                    size: 200,
                },
            }).then(async (res) => {
                if ((await res) && (await res.data.code) === 200) {
                    res.data.data.forEach((item) => {
                        this.diagnosticBasisArray.push({
                            label: item.name,
                            value: item.name,
                            outCode: item.outCode,
                        });
                    });
                    this.diagnosticBasisArray.sort((a, b) => {
                        return parseFloat(a.outCode) - parseFloat(b.outCode);
                    });
                }
            });
        },
    },
};
</script>

<style scoped>
.normal {
    padding: 10px;
    font-size: 14px;
    color: #606266;
}

.btn-item {
    cursor: pointer;
    line-height: 28px;
    padding-left: 10px;
    border-radius: 2px;
}

.is-active {
    color: #ffffff;
    background-color: #10a1df;
}

.btn-item:hover {
    color: #ffffff;
    background-color: #10a1df;
}

.cut-line {
    width: 100%;
    border-bottom: 1px solid #000;
}

.a4 {
    width: 802px;
    height: 100%;
    margin: 0 auto;
    /* background-color: #e6e1e0; */
    background-color: #eeeeee;
    padding: 20px;
}

.a4 .title {
    text-align: center;
    letter-spacing: 2px;
    color: red;
    margin-bottom: 20px;
}

.image-box {
    padding: 0 100px;
}

.check-item {
    letter-spacing: 1px;
    padding-left: 14px;
}

.check-doctor {
    text-align: right;
    padding-right: 100px;
}

.heiti {
    font-family: 'SimHei';
    font-size: 16px;
    font-weight: bold;
    line-height: 35px;
}
</style>
